<template>
    <div class="sse-client">
      <div class="status" :class="status.toLowerCase()">
        {{ statusLabel }}
      </div>
  
      <button 
        v-if="status !== 'OPEN'" 
        @click="connect"
        :disabled="status === 'CONNECTING'"
      >
        {{ status === 'CONNECTING' ? 'Connecting...' : 'Connect' }}
      </button>
  
      <button v-else @click="disconnect">
        Disconnect
      </button>
  
      <div class="messages">
        <div v-for="msg in messageHistory" :key="msg.id" class="message">
          <div class="meta">
            <span class="timestamp">{{ formatTime(msg.timestamp) }}</span>
            <span class="event-type">{{ msg.event }}</span>
          </div>
          <pre class="data">{{ JSON.stringify(msg.data, null, 2) }}</pre>
        </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, computed, watch } from 'vue'
  import { useSSE } from '@/composables/useSSE'
  import type { SSEMessage } from '@/types'
  
  const props = withDefaults(defineProps<{
    endpoint: string
    autoConnect?: boolean
  }>(), {
    autoConnect: true
  })
  
  const messageHistory = ref<SSEMessage[]>([])
  
  const { 
    status, 
    message, 
    connect, 
    disconnect 
  } = useSSE({
    url: props.endpoint,
    autoConnect: props.autoConnect,
    retryInterval: 3000,
    heartbeatInterval: 15000
  })
  
  // 状态显示
  const statusLabel = computed(() => {
    return ({
        CONNECTING: '🟡 Connecting...',
        OPEN: '🟢 Connected',
        CLOSED: '⚫ Disconnected',
        ERROR: '🔴 Connection Error'
    } as any)[status.value]
  })
  
  // 消息收集
  watch(message, (newMsg) => {
    if (newMsg) {
      messageHistory.value = [newMsg, ...messageHistory.value].slice(0, 50)
    }
  })
  
  // 格式化时间
  const formatTime = (timestamp: number) => {
    return new Date(timestamp).toLocaleTimeString()
  }
  </script>
  
  <style scoped>
  .sse-client {
    font-family: system-ui, sans-serif;
    max-width: 800px;
    margin: 2rem auto;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
  }
  
  .status {
    padding: 0.5rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    font-weight: 500;
    
    &.open { background: #dcfce7; color: #166534; }
    &.connecting { background: #fef9c3; color: #854d0e; }
    &.error { background: #fee2e2; color: #991b1b; }
  }
  
  button {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background: #3b82f6;
    color: white;
    transition: opacity 0.2s;
  
    &:disabled {
      opacity: 0.7;
      cursor: not-allowed;
    }
  
    &:hover:not(:disabled) {
      opacity: 0.9;
    }
  }
  
  .messages {
    margin-top: 1rem;
    border-top: 1px solid #e5e7eb;
    padding-top: 1rem;
  }
  
  .message {
    padding: 1rem;
    margin-bottom: 1rem;
    background: #f8fafc;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
  
    .meta {
      display: flex;
      justify-content: space-between;
      margin-bottom: 0.5rem;
      font-size: 0.875rem;
      color: #64748b;
    }
  
    .data {
      margin: 0;
      font-family: monospace;
      white-space: pre-wrap;
      background: white;
      padding: 0.5rem;
      border-radius: 4px;
    }
  }
  </style>